<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>09_form</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /*
    需求: 自定义包含表单的组件
      1. 界面如下所示
      2. 输入用户名密码后, 点击登陆提示输入信息
      3. 不提交表单
    */

    class LoginForm extends React.Component {

        constructor(props) {
            super(props);

            this.state = {
                pwd: ''
            };

            this.handleSubmit = this.handleSubmit.bind(this);
            this.handleChange = this.handleChange.bind(this);
        }

        handleSubmit(event) {
            const name = this.nameInput.value;
            const {pwd} = this.state;
            alert(`提交的用户名为${name},密码为${pwd}`);
            //阻止表单自动提交
            event.preventDefault();
        }

        handleChange(event) {
            const pwd = event.target.value;
            this.setState({pwd});
        }

        render() {
            return (
                <div>
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input type="text" ref={input => this.nameInput = input}/>&nbsp;&nbsp;
                        密 码：<input type="password" value={this.state.pwd} onChange={this.handleChange}/>&nbsp;&nbsp;
                        <input type="submit" value="提交"/>
                    </form>
                </div>
            );
        }
    }

    ReactDOM.render(<LoginForm/>, document.getElementById('example'));
</script>
</body>
</html>
